pp108 : Retrieving the Data

Retrieving the Data

This topic describes retrieving the data using cordys.ajax plug-in in the Process Platform HTML5 SDK.

You can retrieve the data using cordys.ajax plug-in in the Process Platform HTML5 SDK. For information on getting started, refer to Getting Started with the SDK.

The process of retrieving the data has been explained using an example in which all the employee details are retrieved from the Northwind Database and displayed as a list. In the code snippet Employees List below, the cordys.ajax plug-in is used to retrieve the information based on the method, namespace, and parameters. Here, the GetEmployeesObjects method retrieves all employee objects if the URL 'http://schemas.cordys.com/NW/GetEmployeesObjects' is valid for a Web service in Process Platform. Authentication is handled internally through the cordys.authentication plug-in.

The function specified in the success callback handler is invoked with the retrieved employee objects as data parameter. As the dataType is set to json, the XML that is returned from the server is automatically converted into javascript objects. The $.map function is used to create a new array with only the Employees objects, removing the tuple-old structure for an efficient rendering. The objects are passed to the rendering engine and the result HTML from rendering engine is added to the Document Object Model (DOM) .

This example uses the standard libraries jQuery and jQuery Mobile, in order to make it work on all the Mobile devices. While using the jQuery library is mandatory, jQuery Mobile can be replaced by any other UI library. You can use the standard libraries from the location /cordys/thirdparty/jquery.

While using the jQuery library, $.ajax to used to retrieve the data. The $.cordys.ajax is an extension of $.ajax, and is used for invoking the Process Platform Web services. You can also include a rendering library to render the data, if required. In this example, jsRender is used for rendering the data, but you can also use other rendering libraries of your choice, such as KnockoutJS. For information on using KnockoutJS as the binding library, refer to Building Read-only Mobile Applications .

Example

This example is similar to employees.htm that is available in the demo folder in the Process Platform HTML5 SDK. For more information on other Demo pages available with the SDK, refer to the Sample Pages.

Employees List 
<html>
    <head>
        <title>Employees</title>
        <meta content="width=device-width, initial-scale=1" name="viewport"/>
        <link href="/cordys/html5/jquery/jquery.mobile.min.css" rel="stylesheet"/>
        <script src="/cordys/html5/jquery/jquery.js" type="text/javascript"/>
        <script src="/cordys/html5/jquery/jquery.mobile.js" type="text/javascript"/>
        <script src="/cordys/html5/jquery/jsrender.js" type="text/javascript"/>
        <script src="/cordys/html5/cordys.html5sdk.js" type="text/javascript"/>
        <style type="text/css"> img.photo { position:absolute; top:0px; right:0px; bottom:0px; height:100%; } </style>
        <script id="employeeTemplate" type="text/x-jsrender">
            <li>
                <div>
                    <h3 class="ui-li-heading">{{:FirstName}} {{:LastName}}</h3>
                    <p class="ui-li-desc">{{:Address}}</p>
                    <p class="ui-li-desc">{{:City}} {{:Country}}</p>
                </div>
            </li>
        </script>
        <script type="text/javascript"> $(function() { // get the employees $.cordys.ajax({ method: "GetEmployeesObjects", namespace: "http://schemas.cordys.com/NW", parameters: { fromEmployeeID : "0", toEmployeeID : "99" }, dataType: 'json', // the xml result will be converted into js objects success: function(data) { // Create an array with only the Employees objects, skip the tuple/old structure var employees = $.map($.makeArray(data.tuple), function(tuple, index) { if (tuple.old.Employees.Photo) { // Remove first 104 characters from the Photo, which is header information tuple.old.Employees.Photo = tuple.old.Employees.Photo.substring(104); } return tuple.old.Employees; }); var html = $("#employeeTemplate").render(employees); $('#employeeList') .html(html) .listview("refresh"); } }); }); </script>
    </head>
    <body>
        <div data-role="page" id="">
            <div data-role="header" data-theme="b">
                <h1>Employees</h1>
            </div>
            <div data-role="content" data-theme="b">
                <img src="~/html5/images/undo.gif"/>
                <ul data-inset="true" data-role="listview"
                    data-theme="c" id="employeeList"/>
            </div>
        </div>
    </body>
</html>

Attachments: